import styled from "styled-components";

export const SelectBox = styled.div`
    position: relative;
    .input_box{
        position: relative;
        input{
            width: 27.2rem;
            height: 3.6rem;
            caret-color: transparent;
            cursor: pointer;
            background: #053561;
            border: .1rem solid #1B6DA1;
            padding-right: 3.6rem;
        }
        input:focus{
            outline: none; /* 去除默认的焦点样式 */
        }
        input:focus, input:active {
            border-color: #1677ff; /* 例如，将边框颜色改为红色 */
        }
        .input_right{
            position: absolute;
            right: 0;
            top: 0;
            width: 3.6rem;
            height: 3.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2398E2;
        }
    }
    .select_list_ul{
        min-width: 24rem;
        max-height: 20rem;
        background: #093142;
        border-radius: 2px;
        border: 1px solid #3CC6BE;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            width: 0; /* 滚动条宽度 */
        }
    }

 

`;
export const SelectListUl = styled.ul<{
    show: boolean;
}>`
        position: absolute;
        left: 0;
        top: 3.6rem;
        max-height: ${(props) => (props.show ? '20rem' : '0')}; // 控制内容区域的最大高度
        overflow-y: scroll;
        transition: max-height 0.5s ease-out;
`;
export const SelectTreeUl = styled.div`
    background: #093142;
`
export const SelectTreeLi = styled.div`
    height: 5rem;
    display: flex;
    align-items: center;
    padding: 0 2rem;
`